.z-date-picker {
    background-color: #ffffff;
    position: absolute;
    top: 100px;
    left: 100px;
    z-index: 1001;
    padding: 0px 10px 10px 10px;
    border-radius: 3px;
    box-shadow: 0 3px 6px -4px #0000001f, 0 6px 16px #00000014, 0 9px 28px 8px #0000000d;
    .z-date-picker-header {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        height: 32px;
        border-bottom: 1px solid rgba(0,0,0,.06);
        ._arrow {
            display: block;
            content: '';
            position: absolute;
            height: 8px;
            width: 8px;
            border-top: 1px solid #00000040;
            border-left: 1px solid #00000040;
            top: 4px;
        }
        ._activeArrow {
            cursor: pointer;
            &:hover {
                &::before {
                    border-top: 1px solid #000000d9;
                    border-left: 1px solid #000000d9;
                }
                &::after {
                    border-top: 1px solid #000000d9;
                    border-left: 1px solid #000000d9;
                }
            }
        }
        .z-date-picker-year-change-btn-pre {
            height: 18px;
            width: 18px;
            position: relative;
            // background-color: blueviolet;
            cursor: pointer;
            &::before {
                ._arrow;
                transform: rotate(-45deg);
                left: 5px;
            }
            &::after {
                ._arrow;
                transform: rotate(-45deg);
                left: 9px;
            }
            ._activeArrow;
        }
        .z-date-picker-month-change-btn-pre {
            height: 18px;
            width: 18px;
            position: relative;
            &::after {
                ._arrow;
                transform: rotate(-45deg);
                left: 7px;
            }
            ._activeArrow;
        }
        .z-date-picker-month-change-btn-next {
            height: 18px;
            width: 18px;
            position: relative;
            &::after {
                ._arrow;
                transform: rotate(-225deg);
                left: 7px;
            }
            ._activeArrow;
        }
        .z-date-picker-year-change-btn-next {
            height: 18px;
            width: 18px;
            position: relative;
            // background-color: blueviolet;
            cursor: pointer;
            &::before {
                ._arrow;
                transform: rotate(-225deg);
                left: 5px;
            }
            &::after {
                ._arrow;
                transform: rotate(-225deg);
                left: 9px;
            }
            ._activeArrow;
        }
        .z-date-picker-year {
            text-align: center;
            font-size: 14px;
            color: rgba(0, 0, 0, 0.8);
            padding: 0px 5px;
            flex: 1;
        }
    }
    .z-datepicker-body {
        .z-datepicker-body-head {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-items: center;
            padding-top: 5px;
            span {
                flex: 1 / 7;
                text-align: center;
                color: #000000d9;
                font-size: 14px;
            }
        }
        .z-datepicker-body-content {
            .z-datepicker-body-days {
                .z-datepicker-day-row {
                    display: flex;
                    flex-direction: row;
                    flex-wrap: nowrap;
                    margin-top: 5px;
                    .z-datepicker-day-col {
                        flex: 1 / 7;
                        text-align: center;
                        color: #000000d9;
                        font-size: 14px;
                        height: 24px;
                        width: 24px;
                        line-height: 23px;
                        user-select: none;
                        cursor: pointer;
                        box-sizing: border-box;
                        &:hover {
                            background-color: #f5f5f5;;
                        }
                    }
                    .z-datepicker-day-col-not-active {
                        color: #00000040;
                    }
                    .z-datepicker-day-col-active {
                        background-color: #1890ff;
                        color: #fff;
                    }
                    .z-datepicker-day-col-today {
                        border: 1px solid #1890ff;
                        border-radius: 2px;
                    }
                }
            }
        }
    }
}